import { FC, useRef, useState } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import style from './style.less'

const Agreement: FC = () => {
  const router = useRouter()
  const cargo = useRef(JSON.parse(router.params.res as string))
  const [select, setSelect] = useState(1)
  console.log('签订协议', cargo.current);


  const reject = () => {
    Taro.showModal({
      title: '提示',
      content: '拒绝该协议后该单将被下架，且会影响您的成交率，可在已取消页面重新上架',
      success: function (res) {
        if (res.confirm) {
          Taro.request({
            url: 'http://10.190.84.29:9527/fta-trade/order/shipper/refuseOrder',
            method: 'POST',
            data: JSON.stringify({
              orderNumber: cargo.current.orderNumber,
              openId: Taro.getStorageSync('token')
            }),
            success: () => {
              Taro.reLaunch({ url: '/pages/order/index' })
            },
            fail: () => {
              console.log('拒绝失败');
            }
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

  const agree = () => {
    Taro.showModal({
      title: '提示',
      content: '若同意协议后再取消订单，会扣除一定费用哟',
      success: function (res) {
        if (res.confirm) {
          Taro.request({
            url: 'http://10.190.84.29:9527/fta-trade/order/shipper/agreeOrder',
            method: 'POST',
            data: JSON.stringify({
              orderNumber: cargo.current.orderNumber,
              openId: Taro.getStorageSync('token')
            }),
            success: () => {
              Taro.reLaunch({ url: '/pages/order/index' })
            },
            fail: () => {
              console.log('同意失败');
            }
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

  return (
    <div className={style.root}>
      <div className="tips">{cargo.current.status === 1 ? '司机发起协议，待您确认该协议' : '您已签订该协议'}</div>
      <div className="waybill">
        <div className="waybill-title">货物运输协议</div>
        <div className="waybill-number">运单编号：28327929186784768000</div>
        {cargo.current.status === 1 ? <div className="waybill-mark">待确认</div> : <div className="waybill-mark2">签约成功</div>}
      </div>
      <div className="address">
        <div className="start"><i>·</i> {cargo.current?.loadAddress}</div>
        <div className="end"><i>·</i> {cargo.current?.unloadingAdress}</div>
      </div>
      <div className="info">
        <div className="info-title">车货信息</div>
        <div className="info-container">
          <div>车辆</div>
          <div>{cargo.current?.truckLength}米 {cargo.current?.truckType}</div>
        </div>
        <div className="info-container">
          <div>货物</div>
          <div>{cargo.current?.cargoName}，{cargo.current?.truckWeight}吨，{cargo.current?.cargoCapacipy}方</div>
        </div>
      </div>
      <div className="payment">
        <div className="payment-title">支付信息</div>
        <div className="payment-container">
          <div>总运费</div>
          <div><i style={{ color: '#EF9353', fontSize: Taro.pxTransform(32) }}>{cargo.current?.totalFreightAmount}</i> 元/趟</div>
        </div>
        <div className="payment-container">
          <div>订金</div>
          <div><i style={{ color: '#EF9353', fontSize: Taro.pxTransform(32) }}>{cargo.current?.driverPayDeposit}</i> 元{cargo.current?.isBackDeposit ? '（退还）' : '（不退还）'}</div>
        </div>
      </div>
      <div className="person">
        <div className="personContainer">
          <div style={{ color: select === 1 ? '#FA8624' : '#000' }} onClick={() => { setSelect(1) }}>发货人</div>
          <div style={{ color: select === 2 ? '#FA8624' : '#000' }} onClick={() => { setSelect(2) }}>承运司机</div>
        </div>
        <div className="contact"><i>姓名</i> {select === 1 ? cargo.current.shipperName[0] + '**' : cargo.current.driverName[0] + '**'}</div>
        <div className="contact"><i>联系方式</i> {select === 1 ? cargo.current.shipperTelephone.substr(0, 3) + '****' + cargo.current.shipperTelephone.substr(-4, 4) :
          cargo.current.driverTelephone.substr(0, 3) + '****' + cargo.current.driverTelephone.substr(-4, 4)}</div>
        <div className="contact"><i>发起时间</i> {cargo.current.addTime}</div>
      </div>
      <div className="btnContainer" style={{ display: cargo.current.status === 1 ? 'flex' : 'none' }}>
        <div onClick={reject}>拒绝</div>
        <div onClick={agree}>同意</div>
      </div>
    </div>
  )
}

export default Agreement